<template>
    <div class="oto">
        <nav>
            <div @click="back">
                <svg
                        t="1598572181603"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="2140"
                        width="200"
                        height="200"
                >
                    <path
                            d="M702.94996 958.89419c-8.375761 0-16.751522-3.196809-23.14514-9.590426L265.159102 534.658046c-12.787234-12.777001-12.787234-33.513278 0-46.289256L679.80482 73.722048c12.787234-12.787234 33.502022-12.787234 46.289256 0 12.787234 12.777001 12.787234 33.513278 0 46.289256L334.593498 511.512906l391.501602 391.501602c12.787234 12.777001 12.787234 33.513278 0 46.289256C719.701482 955.697381 711.325721 958.89419 702.94996 958.89419z"
                            p-id="2141"
                    />
                </svg>
            </div>
            <div style="font-size:19px;color:#595959;">一对一辅导</div>
            <div>
                <span class="iconfont icon icon-sousuo" style="font-size:25px;color:#595959;"></span>
            </div>
        </nav>

        <div class="top-classify">
            <ul>
                <li @click="change(1)" :class="{'change':1===index}">
                    选择上课时间
                    <span></span>
                </li>
                <li @click="change(2)" :class="{'change':2===index}">
                    选择老师条件
                    <span></span>
                </li>
            </ul>
        </div>

        <!-- <div class="tc">

            <Classtime />

        </div> -->

        <Oto
                v-for="(item,index) in otoCourseItem"
                :key="index"
                :img="item.avatar"
                :name="item.real_name"
                :sex="item.teach_age"
                :flag="item.is_collect=== 1 ?'已关注':''"
                :age="item.sex === 0 ?'男':'女'"
                @click="onClickOrder(item.teacher_id)"
        ></Oto>
    </div>
</template>

<script>
    import Oto from "../../components/Study/oto";
    // import Classtime from "../components/yueke/classtime";

    export default {
        data() {
            return {
                index: 0,
                classifyShow: false,
                sortShow: false,
            };
        },
        components: {
            Oto,
            // Classtime,
        },
        computed: {
            otoCourseItem() {
                return this.$store.state.oto.otoCourseItem;
            },
        },
        mounted() {
            this.$store.dispatch("otoCourse"); // 约课记录
            this.$store.dispatch("otoCourseOptions"); // 约课记录选择上课时间
        },
        methods: {
            // 返回
            back() {
                window.history.back();
            },
            // 点击跳转预约课程页面
            onClickOrder(id) {
                this.$router.push({
                    path: "/order",
                    query: {
                        id,
                    },
                });
            },

            change(index) {
                this.classifyShow = false;
                this.sortShow = false;
                if (this.index === index) {
                    this.index = 0;
                } else if (index === 1) {
                    this.index = index;
                    this.classifyShow = true;
                } else if (index === 2) {
                    this.index = index;
                    this.sortShow = true;
                }
            },
        },
    };
</script>

<style scoped lang="scss">
    nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    .icon {
        width: 40px;
        height: 5.33vw;
        margin: 0 20px;
    }

    nav {
        width: 100%;
        background: white;
        height: 12vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 0.1vw solid #eeeeee;

        use {
            color: #ffa9ac;
        }
    }

    /deep/ .van-dropdown-menu__bar {
        height: 10vw;
    }

    .van-dropdown-menu /deep/ .van-dropdown-menu__title {
        font-size: 4vw !important;
        line-height: 5vw !important;
        color: #8c8c8c;
    }

    .van-popup /deep/ .van-dropdown-item__content {
        font-size: 3vw !important;
    }

    .top-classify {
        margin-top: 90px;
        background-color: #fff;
        line-height: 80px;
        font-size: 30px;

        ul {
            display: flex;
            justify-content: space-around;

            li {
                position: relative;
                color: #8c8c8c;

                > span {
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 45%;
                    margin-left: 10px;
                    border: {
                        top: 10px solid #8c8c8c;
                        left: 10px solid transparent;
                        right: 10px solid transparent;
                        bottom: 10px solid transparent;
                    }
                }

                &.change {
                    color: #eb6100;

                    > span {
                        top: 30%;
                        border: {
                            bottom: 10px solid #eb6100;
                            left: 10px solid transparent;
                            right: 10px solid transparent;
                            top: 10px solid transparent;
                        }
                    }
                }
            }
        }
    }
</style>